<!-- 底部 -->
<script setup>
import { useMainStore } from '@/store/index.js'
import { useRouter } from 'vue-router'
import { computed, ref } from 'vue'
const router = useRouter()

const mainStore = useMainStore()

const showTabbar = computed(() => {
  const showRoutes = ['/', '/quote', '/earnCoins', '/borrowingCurrency', '/assets']
  return showRoutes.includes(router.currentRoute.value.path)
})

// 引入图片
import homeIcon from '@/assets/tab/home.svg'
import homeIconActive from '@/assets/tab/home-active.svg'
import quoteIcon from '@/assets/tab/quote.svg'
import quoteIconActive from '@/assets/tab/quote-active.svg'
import earnIcon from '@/assets/tab/earn.svg'
import earnIconActive from '@/assets/tab/earn-active.svg'
import borrowIcon from '@/assets/tab/borrow.svg'
import borrowIconActive from '@/assets/tab/borrow-active.svg'
import assetsIcon from '@/assets/tab/assets.svg'
import assetsIconActive from '@/assets/tab/assets-active.svg'

const tabList = [
  {
    name: '首页',
    route: '/',
    icon: homeIcon,
    iconActive: homeIconActive,
  },
  {
    name: '行情',
    route: '/quote',
    icon: quoteIcon,
    iconActive: quoteIconActive,
  },
  {
    name: '赚币',
    route: '/earnCoins',
    icon: earnIcon,
    iconActive: earnIconActive,
  },
  {
    name: '借币',
    route: '/borrowingCurrency',
    icon: borrowIcon,
    iconActive: borrowIconActive,
  },
  {
    name: '资产',
    route: '/assets',
    icon: assetsIcon,
    iconActive: assetsIconActive,
  },
]

// const tabList = [
//   {
//     name: '首页',
//     route: '/',
//     icon: 'https://leacdie.cc/static/images-ai/Z0d_730b78cc_fWz.svg',
//     iconActive: 'https://leacdie.cc/static/images-ai/cHN_a22afd5d_ujp.svg',
//   },
//   {
//     name: '行情',
//     route: '/quote',
//     icon: 'https://leacdie.cc/static/images-ai/y9Q_984be147_nvS.svg',
//     iconActive: 'https://leacdie.cc/static/images-ai/cQD_068e1b06_LCR.svg',
//   },
//   {
//     name: '赚币',
//     route: '/earnCoins',
//     icon: 'https://leacdie.cc/static/images-ai/Kf9_15b933fd_mcS.svg',
//     iconActive: 'https://leacdie.cc/static/images-ai/5BA_839d47c0_mWq.svg',
//   },
//   {
//     name: '借币',
//     route: '/borrowingCurrency',
//     icon: 'https://leacdie.cc/static/images-ai/5Ai_c077cf33_r0v.svg',
//     iconActive: 'https://leacdie.cc/static/images-ai/GMG_3a62ed0e_SG2.svg',
//   },
//   {
//     name: '资产',
//     route: '/assets',
//     icon: 'https://leacdie.cc/static/images-ai/qWa_a7f0dc3e_cnY.svg',
//     iconActive: 'https://leacdie.cc/static/images-ai/bXs_a798358f_xOR.svg',
//   },
// ]

const goTab = (route) => {
  router.push(route)
}

// ✅ 禁止跳转盗U菜单
//const goTab = (route) => {
  // 🚫 禁止“赚币”跳转
 // if (route === '/earnCoins') return
//  router.push(route)
//}


</script>

<template>
  <div class="tab-bar-box" v-if="showTabbar">
    <div class="tab-bar-bg">
      <img class="tabbar-bg-img" src="@/assets/tab/QRa_6c7bff06_vd3.60cde2df.svg" alt="tabbar-bg" />
      <div class="tab-bar" style="position: relative;">
        <div class="bgg" style="    position: absolute;
    top: 14px;
    left: 106px;
    width: 6.8rem;
    height: 1.7rem;
    background: rgb(255, 255, 255);
    z-index: -1;
    border-radius: 30px;"></div>

        <div
          v-for="(tab, idx) in tabList"
          :key="tab.route"
          class="tab-item"
          :class="{ active: router.currentRoute.value.path === tab.route }"
          @click="goTab(tab.route)"
        >
          <div class="icon-wrap" :class="{ active: router.currentRoute.value.path === tab.route }">
            <img
              :src="router.currentRoute.value.path === tab.route ? tab.iconActive : tab.icon"
              class="tabbarImg"
              :alt="tab.name"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-bar-box {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: 5px;
  position: fixed;
  z-index: 9;
  background: transparent;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: var(--ex-max-width);
  border-top: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.tab-bar-bg {
  position: relative;
  width: 420px;
  max-width: 100vw;
  height: 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tabbar-bg-img {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 2;
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding:0 28px;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  cursor: pointer;
  .icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    &.active {
      background: #000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }
  }
  &.active .icon-wrap {
    background: #000;
  }
}
.tabbarImg {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
